@import './../index';

// 账单详情
.billdetail-wrap {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background: #F6F6F6;
  //overflow-x: hidden;
  .billdetail-header {
    .header-left {
      width: 0.1rem;
      height: 0.17rem;
      @include background-image-wrap('./../../../images/arrows.png');
    }
    .header-title {
      line-height: 1;
      font-size: 0.18rem;
      color: #212121;
    }
    .header-right {
      line-height: 1;
      font-size: 0.15rem;
      color: #212121;
    }
  }
  .billdetail-logo {
    margin-top: .43rem;
    width: 100%;
    height: .6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    font-size: .14rem;
    padding-top: .2rem;
  }
  .billdetail-logo-left {
    width: .2rem;
    height: .2rem;
    margin-right: .08rem;
  }
  .billdetail-china-mobile{
    @include background-image-wrap('./../../../images/china-mobile.png');
  }
  .billdetail-china-unicom{
    @include background-image-wrap('./../../../images/china-unicom.png');
  }
  .billdetail-chinanet{
    @include background-image-wrap('./../../../images/chinanet-1.png');
  }

  .billdetail-price {
    width: 100%;
    font-size: .18rem;
    font-weight: bold;
    text-align: center;
    background: #ffffff;
    padding: .1rem 0 .2rem;
  }
  .billdetail-dealclose {
    width: 100%;
    height: .14rem;
    font-size: .14rem;
    background: #ffffff;
    text-align: center;
    padding-bottom: .25rem;
  }
  .billdetail-table {
    display: flex;
    flex-flow: column;
    width: 100%;
    padding: 0.15rem;
    background: #ffffff;
    .billdetail-item {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      font-size: .15rem;
      padding: .1rem .05rem;
    }
    .billdetail-item-class {
      padding: 0 .05rem;
    }
    .billdetail-item-left {
      white-space: normal;
      display: inline;
      color: #999999;
    }
    .billdetail-explain{
      white-space: nowrap;
    }
    .billdetail-maxwidth {
      width: 1.3rem;
    }
    .billdetail-label-remark{
      width: 1rem;
      white-space: nowrap;
      line-height: 1.5;
      color: #212121;
    }
    //标签和备注
    .billdetail-item-labelcontainer {
      max-width: calc(100% - 1rem);
      display: flex;
      flex: 1;
      justify-content: flex-end;
      margin-left: .04rem;

      .item-right-label {
        max-width: calc(100% - 0.18rem);
        //border: 1px solid #000;
        display: flex;
        white-space: normal;
        overflow-y: auto;
        float: left;
        .item-right-text{
          float: right;
          display: inline-flex;
          align-items: center;
          height: .25rem;
          line-height: 1;
          border: .01rem solid #3699FF;
          color: #3699FF;
          border-radius: .03rem;
          padding-left: .08rem;
          padding-right: .5em;
          background-color: #ffffff;
          margin-right: .03rem;
          white-space: nowrap;
        }
        .item-right-label-add{
          margin-top: .02rem;
          margin-left: calc(100% - 0.3rem);
        }
      }

      .right-label-arrows{
        width: .09rem;
        height: .17rem;
        @include background-image-wrap('./../../../images/arrows.png');
        transform: scaleX(-1);
        float: right;
        margin-left: .08rem;
        margin-top: .04rem;
      }
    }
    .billdetail-item-right {
      display: inline-block;
      text-align: right;
      line-height: 1.5;
      .item-right-arrows {
        width: .09rem;
        height: .17rem;
        @include background-image-wrap('./../../../images/arrows.png');
        transform: scaleX(-1);
        float: right;
        margin-left: .1rem;
        margin-top: .04rem;
      }
    }

    //账单分类
    .billdetail-item-class{
      .selectcategory-wrap{
        display: flex;
        justify-content: space-between;
        .billdetail-sort{
          color: #999999;
        }
        .billdetail-other{
          line-height: 1.5;
          .billdetail-other-arrows{
            width: .09rem;
            height: .17rem;
            @include background-image-wrap('./../../../images/arrows.png');
            transform: scaleX(-1);
            float: right;
            margin-left: .1rem;
            margin-top: .04rem;
          }
        }
      }
    }

    //备注
    .billdetail-remark{
      border-bottom: .01rem solid #EEEEEE;
      .billdetail-remark-left{
        width: 1rem;
        white-space: nowrap;
      }
      .billdetail-remark-right{
        max-width: calc(100% - 1rem);
        display: flex;
        justify-content: space-between;
        .remark-right-text{
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .remark-right-arrows{
          width: .09rem;
          height: .17rem;
          @include background-image-wrap('./../../../images/arrows.png');
          transform: scaleX(-1);
          float: right;
          margin-left: .1rem;
        }
      }
    }

    //来往记录
    .billdetail-recordContainer{
      margin-top: .05rem;
      .billdetail-see-record{
        color: #212121;
      }
    }

    //对此订单有疑问
    .billdetail-query-left{
      color: #212121;
    }
    .billdetail-query-right{
      .billdetail-query-right-arrows{
        width: .09rem;
        height: .17rem;
        @include background-image-wrap('./../../../images/arrows.png');
        transform: scaleX(-1);
        float: right;
        margin-left: .1rem;
        margin-top: .04rem;
      }
    }

    .billdetail-record{
      .billdetail-record-arrows{
        width: .09rem;
        height: .17rem;
        @include background-image-wrap('./../../../images/arrows.png');
        transform: scaleX(-1);
        float: right;
        margin-left: .1rem;
        margin-top: .04rem;
      }
    }
    .billdetail-item-phonenumber {
      display: inline-block;
      margin-left: .5rem;
      color: #5895FF;
      border-bottom: .01rem solid #5895FF;
    }
    .billdetail-item-add:nth-of-type(1) {
      padding-bottom: .15rem;
    }
    .billdetail-line {
      margin-bottom: .1rem;
    }
  }
  .billdetail-blank {
    width: 100%;
    height: .15rem;
    background: #F6F6F6;
  }
  .billdetail-line {
    width: 100%;
    height: .01rem;
    background: #EEEEEE;
  }
  .billdetail-footer {
    width: 100%;
    height: .78rem;
    background: #ffffff;
    margin-top: .64rem;
    .billdetail-footer-content {
      width: 3.42rem;
      margin: 0 auto;
      font-size: .12rem;
      margin-top: .24rem;
      color: #999999;
      line-height: .16rem;
    }
  }
}

.billdetails-select-picker {
  .am-picker-popup-header-left {
    color: #F0281F !important;
  }
}

